<template>
  <div id="basic">
    <!-- <div class="title">孕妇膳食测评报告</div>
        <div id="createTime">报告日期：{{ report_time }}</div> -->
    <!-- <el-divider  border-style="dashed"  style="border-color:#FF5C82">
        <div class="subTitle">历史曲线图</div>
      </el-divider> -->

    <!-- 生长发育曲线图 -->
    <div style=" width: 100%; background-color:#FF5C82;  text-align: center; margin:auto">
      <div style="font-size: 40px; font-weight: bold; color: #ffffff;padding-top:20px;">{{ Titlename }}</div>
      <!-- <span style="font-size: 30px; color: #666666; margin-left: 20px;display: block;">基本信息报告</span> -->
      <div style="margin-top:30px;font-size: 24px;padding-bottom: 20px;font-weight: bold;color:#333333;">孕妇体重增长曲线图</div>
    </div>
    <div style="width: 100%; height: 40px; background-color: #FF5C82; margin-top: 10px; display: flex;">
      <div><img src="../../assets/img/12.jpg" style="height: 40px" alt="" /></div>
      <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">孕妇基本信息</div>
    </div>
    <div style="width: 1070px; border-top: 2px solid #FF5C82; border-right: 2px solid #FF5C82;  margin-top: 10px">
      <div style="display: flex">
        <div
          style="background-color: #FF5C82; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
          检测日期</div>
        <div style="width: 90%; height: 40px; border-bottom: 2px solid #FF5C82; line-height: 40px; text-indent: 20px;">
          {{ report_time }}
        </div>
      </div>
      <div style="display: flex">
        <div
          style="background-color: #FF5C82; width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
          孕妇姓名
        </div>
        <div
          style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
          {{ contents.username ?? '[]' }}
        </div>
        <div
          style="background-color: #FF5C82;width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82;">
          手机号
        </div>
        <div
          style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82;">
          {{ contents.guardian_mobile ?? '[]' }}
        </div>
        <div
          style="background-color: #FF5C82; width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82;">
          年龄
        </div>
        <div
          style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
          {{ contents.age ?? '[]' }}岁
        </div>
        <div
          style=" background-color: #FF5C82; width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
          身高
        </div>
        <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #FF5C82;">
          {{ contents.height ?? '[]' }}CM
        </div>
      </div>
      <div style="display: flex">
        <div
          style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
          体重
        </div>
        <div
          style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82; ">
          {{ contents.weight ?? '[]' }}KG
        </div>
        <div
          style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
          孕周数
        </div>
        <div
          style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82; ">
          {{ contents.gestational_weeks ?? '[]' }}周
        </div>
        <div
          style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
          末次月经
        </div>
        <div
          style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82; ">
          {{ contents.pre_weight ?? '[]' }}
        </div>
        <div
          style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
          预产期
        </div>
        <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #FF5C82;">
          {{ contents.edc ?? '[]' }}
        </div>
      </div>
      <div style="display: flex">
        <div
          style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
          多胎
        </div>
        <div
          style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #FF5C82; border-bottom: 2px solid #FF5C82; ">
          {{ contents.twin ?? '[]' }}
        </div>
        <div
          style="background-color: #FF5C82;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #FF5C82;border-bottom: 2px solid #FF5C82;">
          腹围
        </div>
        <div
          style=" width: 15%; height: 40px; text-align: center; line-height: 40px;  border-bottom: 2px solid #FF5C82; ">
          {{ contents.abdominal_girth ?? '[]' }}
        </div>
        <div
          style="width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-bottom: 2px solid #FF5C82;">

        </div>
        <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-bottom: 2px solid #FF5C82; ">

        </div>
        <div
          style="width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-bottom: 2px solid #FF5C82;">

        </div>
        <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #FF5C82;">

        </div>
      </div>

    </div>


    <div style="display:flex;border: 2px solid #FF5C82;margin-top:20px">
      <div id="myChart1" :style="{ width: '40%', height: '550px', }"></div>
      <div id="myChart2" :style="{ width: '60%', height: '550px', }"></div>
      <!-- <div id="myChart3" :style="{ width: '33%', height: '550px', }"></div> -->
    </div>

  </div>
</template>
  
<script setup>
import { defineComponent, onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts'
import http, { baseUrl } from "../../utils/http";
import { useRoute, useRouter } from "vue-router"
const router = useRouter()
const route = useRoute()
const hospital_name = ref()
const report_time = ref()
const reportId = ref()
const contents = ref({})
const id = ref()
const Titlename = ref()
const birth = ref()
const username = ref()
const guardian = ref()
const birthStatus = ref()
onMounted(() => { // 需要获取到element,所以是onMounted的Hook
  Titlename.value = localStorage.getItem('Title');
  reportId.value = route.params.reportId
  id.value = route.params.id
  username.value = route.params.username
  guardian.value = route.params.guardian
  birthStatus.value = route.params.birth

  http.get('api/archives/viewReportMember?id=' + reportId.value + '&username=' + username.value + '&guardian=' + guardian.value + '&birth=' + birthStatus.value).then((res) => {
    if (res.data.code === 0) {
      ElMessage.error(res.data.msg)
    }
    report_time.value = res.data.data.times
    contents.value = res.data.data.contents;
    birth.value = res.data.data.contents.birth;
    var bmi1 = '';
    var bmi2 = '';
    bmi1 = res.data.data.bmi;
    if (bmi1 < 18.5) {
      bmi2 = '偏瘦'
      localStorage.setItem('bmi', bmi2)
    } else if (bmi1 < 24 && bmi1 >= 18.5) {
      bmi2 = '正常'
      localStorage.setItem('bmi', bmi2)
    } else if (bmi1 < 28 && bmi1 >= 24) {
      bmi2 = '偏胖'
      localStorage.setItem('bmi', bmi2)
    } else if (bmi1 >= 28) {
      bmi2 = '肥胖'
      localStorage.setItem('bmi', bmi2)
    }
    let color2 = ["#D0443B", "#3EA4AA"];
    let xAxisData = ["偏瘦", "正常", "偏胖", "肥胖",];
    var myChart = echarts.init(document.getElementById("myChart1"));
    myChart.value = myChart;
    myChart.setOption({
      backgroundColor: "#fff",
      color: color2,
      legend: {
        top: 20
      },
      tooltip: {
        trigger: "axis",
        formatter: function () {
          return "";
        }
      },
      grid: {
        top: 100,
        containLabel: true
      },
      xAxis: [
        {
          name: "",
          type: "category",
          boundaryGap: false,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40,
            padding: [0, 0, 0, -15]
          },
          data: xAxisData
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "BMI值",
          axisLabel: {
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40
          }
        }
      ],
      series: [
        {
          name: "国际",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color2[0]
            }
          },
          symbol: "circle", //数据交叉点样式
          itemStyle: {
            color: '#ff0000'  // 这里将 '销量' 系列的颜色设置为红色
          },
          data: [0, 18.5, 24.0, 28.0]
        },
        {
          name: "我的",
          type: "scatter",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color2[1]
            }
          },
          symbol: "circle", //数据交叉点样式 (实心点)
          // itemStyle: {
          //     normal: {
          //         color: "#ffffff",
          //         borderColor: '#3EA4AA',
          //         borderWidth: 1,
          //     }
          // },
          data: [[`${bmi2}`, `${bmi1}`]]
        }
      ]
    });
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  })

  http.get('api/archives/viewreport?id=' + reportId.value + '&username=' + username.value + '&guardian=' + guardian.value + '&birth=' + birthStatus.value).then((res) => {
    hospital_name.value = res.data.data.hospital_name


    let color = ["#3EA4AA"];
    let color1 = ["#D0443B", "#3EA4AA"];
    let color2 = ["#D0443B", "#3EA4AA"];
    var arr = [];
    var arr2 = [];
    var parr = res.data.data.primaryHeight;
    if (res.data.data.primaryHeight) {
      for (let i = 0; i < parr.length; i++) {
        arr.push(parr[i].content);
        arr2.push(parr[i].month);
      }
    }





    var arr1 = [];
    var arr3 = [];
    var arr4 = [];
    var indexes = '';
    var parr1 = res.data.data.primaryWeight;
    if (res.data.data.primaryWeight) {
      for (let i = 0; i < parr1.length; i++) {
        arr1.push(parr1[i].content);
        arr3.push(parr1[i].month);
      }
    }
    arr4 = arr3.filter((item, index) => {
      return parseInt(item) > parseInt(res.data.data.sumbirths)
    })
    for (let i = 0; i < arr3.length; i++) {
      if (arr3[i] == arr4[0]) {
        indexes = i
      }
    }

    var BMI_1 = localStorage.getItem('bmi');
    if (BMI_1 == '偏瘦') {
      //低体重
      let weight1_min = ['0', '0', '0', '0', '0', '0', '0', '0', '1', '1.5', '2.5', '3.5', '4', '5', '5.5', '6.5', '7.5', '8', '9', '10', '10.5', '11'];
      let weight1_max = ['0', '0.25', '0.5', '0.75', '1', '1.5', '1.75', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'];
      let indexes2 = '';
      let index3 = [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42];
      let weekss = localStorage.getItem('weeks');
      let weight1 = localStorage.getItem('weight1');
      let weight2 = localStorage.getItem('weight2');
      let index = index3.findIndex(element => element == weekss);
      if (index !== -1) {
        indexes2 = `${index}`
      } else {
        for (let i = 0; i < index3.length; i++) {
          if (index3[i] - 1 == weekss) {
            indexes2 = i - 1
          }
        }
      }
      let myChart1 = echarts.init(document.getElementById("myChart2"));
      myChart1.value = myChart1;
      myChart1.setOption({
        legend: {
          top: 20
        },
        tooltip: {
          trigger: "axis",
          formatter: function () {
            return "";
          }
        },
        grid: {
          top: 100,
          containLabel: true
        },
        xAxis: {
          name: '孕周数',
          type: 'category',
          data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42],
          boundaryGap: false,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40,
            padding: [0, 0, 0, -15]
          },
        },
        yAxis: {
          name: '增重(kg)',
          type: 'value',
          axisLabel: {
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40
          }

        },
        series: [
          {
            data: weight1_min,
            type: 'line',
            itemStyle: {
              normal: {
                borderColor: '#ff5c82', // 线的颜色
                borderWidth: 1, // 线的宽度
                borderType: 'solid', // 线的类型
                color: '#ff5c82', // 点的颜色
                radius: 1, // 点的半径
                type: 'circle' // 点的形状，这里设置为圆形
              }
            },
          },
          {
            data: weight1_max,
            type: 'line',
            itemStyle: {
              normal: {
                borderColor: '#ff5c82', // 线的颜色
                borderWidth: 1, // 线的宽度
                borderType: 'solid', // 线的类型
                color: '#ff5c82', // 点的颜色
                radius: 1, // 点的半径
                type: 'circle' // 点的形状，这里设置为圆形
              }
            },
          },
          {
            data: [
              [indexes2, `${weight1}` - `${weight2}`],
            ], // 用多维数组表示数据，每个子数组包含两个元素，分别表示x轴和y轴的值
            type: 'scatter'
          }
        ]
      });
      window.addEventListener("resize", function () {
        myChart1.resize();
      });
    } else if (BMI_1 == '正常') {
      //正常
      let weight2_min = ['0', '0', '0', '0', '0', '0', '0', '0', '0.5', '1', '2', '2.5', '3', '3.5', '4', '5', '5.5', '6', '6.5', '7', '7.5', '8'];
      let weight2_max = ['0', '0.25', '0.5', '0.75', '1', '1.5', '1.75', '2', '3', '4', '4.5', '5.5', '6.5', '7.5', '8', '9', '10', '11', '12', '12.5', '13.5', '14'];
      let indexes2 = '';
      let index3 = [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42];
      let weekss = localStorage.getItem('weeks');
      let weight1 = localStorage.getItem('weight1');
      let weight2 = localStorage.getItem('weight2');
      let index = index3.findIndex(element => element == weekss);
      if (index !== -1) {
        indexes2 = `${index}`
      } else {
        for (let i = 0; i < index3.length; i++) {
          if (index3[i] - 1 == weekss) {
            indexes2 = i - 1
          }
        }
      }
      let myChart1 = echarts.init(document.getElementById("myChart2"));
      myChart1.value = myChart1;
      myChart1.setOption({
        legend: {
          top: 20
        },
        tooltip: {
          trigger: "axis",
          formatter: function () {
            return "";
          }
        },
        grid: {
          top: 100,
          containLabel: true
        },
        xAxis: {
          name: '孕周数',
          type: 'category',
          data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42],
          boundaryGap: false,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40,
            padding: [0, 0, 0, -15]
          },
        },
        yAxis: {
          name: '增重(kg)',
          type: 'value',
          axisLabel: {
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40
          }

        },
        series: [
          {
            data: weight2_min,
            type: 'line',
            itemStyle: {
              normal: {
                borderColor: '#ff5c82', // 线的颜色
                borderWidth: 1, // 线的宽度
                borderType: 'solid', // 线的类型
                color: '#ff5c82', // 点的颜色
                radius: 1, // 点的半径
                type: 'circle' // 点的形状，这里设置为圆形
              }
            },
          },
          {
            data: weight2_max,
            type: 'line',
            itemStyle: {
              normal: {
                borderColor: '#ff5c82', // 线的颜色
                borderWidth: 1, // 线的宽度
                borderType: 'solid', // 线的类型
                color: '#ff5c82', // 点的颜色
                radius: 1, // 点的半径
                type: 'circle' // 点的形状，这里设置为圆形
              }
            },
          },
          {
            data: [
              [indexes2, `${weight1}` - `${weight2}`],
            ], // 用多维数组表示数据，每个子数组包含两个元素，分别表示x轴和y轴的值
            type: 'scatter'
          }
        ]
      });
      window.addEventListener("resize", function () {
        myChart1.resize();
      });
    } else if (BMI_1 == '偏胖') {
      //超重
      let weight3_min = ['0', '0', '0', '0', '0', '0', '0', '0', '0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4', '4.5', '5', '5.5', '6', '6.5', '7'];
      let weight3_max = ['0', '0.25', '0.5', '0.75', '1', '1.5', '1.75', '2', '2.5', '3.5', '4', '4.5', '5.5', '6', '6.5', '7.5', '8', '8.5', '9.5', '10', '10.5', '11'];
      let indexes2 = '';
      let index3 = [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42];
      let weekss = localStorage.getItem('weeks');
      let weight1 = localStorage.getItem('weight1');
      let weight2 = localStorage.getItem('weight2');
      let index = index3.findIndex(element => element == weekss);
      if (index !== -1) {
        indexes2 = `${index}`
      } else {
        for (let i = 0; i < index3.length; i++) {
          if (index3[i] - 1 == weekss) {
            indexes2 = i - 1
          }
        }
      }
      console.log(indexes2)
      let myChart1 = echarts.init(document.getElementById("myChart2"));
      myChart1.value = myChart1;
      myChart1.setOption({
        legend: {
          top: 20
        },
        tooltip: {
          trigger: "axis",
          formatter: function () {
            return "";
          }
        },
        grid: {
          top: 100,
          containLabel: true
        },
        xAxis: {
          name: '孕周数',
          type: 'category',
          data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42],
          boundaryGap: false,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40,
            padding: [0, 0, 0, -15]
          },
        },
        yAxis: {
          name: '增重(kg)',
          type: 'value',
          axisLabel: {
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40
          }

        },
        series: [
          {
            data: weight3_min,
            type: 'line',
            itemStyle: {
              normal: {
                borderColor: '#ff5c82', // 线的颜色
                borderWidth: 1, // 线的宽度
                borderType: 'solid', // 线的类型
                color: '#ff5c82', // 点的颜色
                radius: 1, // 点的半径
                type: 'circle' // 点的形状，这里设置为圆形
              }
            },
          },
          {
            data: weight3_max,
            type: 'line',
            itemStyle: {
              normal: {
                borderColor: '#ff5c82', // 线的颜色
                borderWidth: 1, // 线的宽度
                borderType: 'solid', // 线的类型
                color: '#ff5c82', // 点的颜色
                radius: 1, // 点的半径
                type: 'circle' // 点的形状，这里设置为圆形
              }
            },
          },
          {
            data: [
              [indexes2, `${weight1}` - `${weight2}`],
            ], // 用多维数组表示数据，每个子数组包含两个元素，分别表示x轴和y轴的值
            type: 'scatter'
          }
        ]
      });
      window.addEventListener("resize", function () {
        myChart1.resize();
      });
    } else if (BMI_1 == '肥胖') {
      //肥胖
      let weight4_min = ['0', '0', '0', '0', '0', '0', '0', '0', '0.5', '0.75', '1', '1.5', '2', '2.25', '2.5', '3', '3.5', '3.75', '4', '4.5', '4.75', '5'];
      let weight4_max = ['0', '0.25', '0.5', '0.75', '1', '1.5', '1.75', '2', '2.5', '3', '3.5', '4', '4.5', '5', '5.5', '6', '6.5', '7', '7.5', '8', '8.5', '9'];
      let indexes2 = '';
      let index3 = [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42];
      let weekss = localStorage.getItem('weeks');
      let weight1 = localStorage.getItem('weight1');
      let weight2 = localStorage.getItem('weight2');
      let index = index3.findIndex(element => element == weekss);
      if (index !== -1) {
        indexes2 = `${index}`
      } else {
        for (let i = 0; i < index3.length; i++) {
          if (index3[i] - 1 == weekss) {
            indexes2 = i - 1
          }
        }
      }
      console.log(indexes2)
      let myChart1 = echarts.init(document.getElementById("myChart2"));
      myChart1.value = myChart1;
      myChart1.setOption({
        legend: {
          top: 20
        },
        tooltip: {
          trigger: "axis",
          formatter: function () {
            return "";
          }
        },
        grid: {
          top: 100,
          containLabel: true
        },
        xAxis: {
          name: '孕周数',
          type: 'category',
          data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42],
          boundaryGap: false,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40,
            padding: [0, 0, 0, -15]
          },
        },
        yAxis: {
          name: '增重(kg)',
          type: 'value',
          axisLabel: {
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40
          }

        },
        series: [
          {
            data: weight4_min,
            type: 'line',
            itemStyle: {
              normal: {
                borderColor: '#ff5c82', // 线的颜色
                borderWidth: 1, // 线的宽度
                borderType: 'solid', // 线的类型
                color: '#ff5c82', // 点的颜色
                radius: 1, // 点的半径
                type: 'circle' // 点的形状，这里设置为圆形
              }
            },
          },
          {
            data: weight4_max,
            type: 'line',
            itemStyle: {
              normal: {
                borderColor: '#ff5c82', // 线的颜色
                borderWidth: 1, // 线的宽度
                borderType: 'solid', // 线的类型
                color: '#ff5c82', // 点的颜色
                radius: 1, // 点的半径
                type: 'circle' // 点的形状，这里设置为圆形
              }
            },
          },
          {
            data: [
              [indexes2, `${weight1}` - `${weight2}`],
            ], // 用多维数组表示数据，每个子数组包含两个元素，分别表示x轴和y轴的值
            type: 'scatter'
          }
        ]
      });
      window.addEventListener("resize", function () {
        myChart1.resize();
      });
    }
  })
  setTimeout(() => {
    print('print-all')
  }, 2000)
});
</script>
  
<style scoped>
#basic .title {
  font-size: 36px;
  width: 100%;
  text-align: center;
}

#basic {
  font-size: 14px;
  width: 1075px;
  min-height: 1244px;
  overflow: hidden;
  padding: 0;
  word-break: break-all;
  margin: 60px auto 0 auto;
  box-shadow: var(--el-box-shadow-light);
  border-radius: var(--el-card-border-radius);
  background-color: var(--el-card-bg-color);
  /* color: var(--el-text-color-primary); */
  transition: var(--el-transition-duration);
  --el-card-border-color: var(--el-border-color-light, #ebeef5);
  --el-card-border-radius: 4px;
  --el-card-padding: 20px;
  --el-card-bg-color: var(--el-color-white);
}

#basic #createTime {
  font-size: 16px;
  color: #999999;
  float: right;
}
</style>
  